<template>
	<view class="container">
		<!-- 自定义标题栏 -->
		<navigationBar :back="false" title="全部分类" extClass="nav" id="top"></navigationBar>
		<view class="tui-searchbox">
			<!-- <view class="tui-search-input" @tap="search">
				<icon type="search" :size="13" color="#999"></icon>
				<text class="tui-search-text">搜索Thorui商品</text>
			</view> -->
		</view>

		<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-into-view="scrollViewId" :style="{ height: height + 'px', top: top + 'px' }">
			<view :id="`id_${index}`" v-for="(item, index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab == index ? 'active' : '']" @tap.stop="swichNav(index)">
				<view class="tabbar_icon m-r-10" v-if="item.icon" :style="'background: linear-gradient(to bottom,'+item.top_color+','+item.bottom_color+');-webkit-background-clip: text;-webkit-text-fill-color: transparent;'">
					<text class="iconfont2 f-30 col-f" :class="item.icon"></text>
				</view>
				<text class="onelist-hidden">{{ item.name }}</text>
			</view>
		</scroll-view>
		<block v-for="(item, index) in tabbar" :key="index">
			<scroll-view scroll-y class="right-box" :style="{ height: height + 'px', top: top + 'px' }" v-if="currentTab == index">
				<!--内容部分 start 自定义可删除-->
				<view class="page-view" v-if="list!=''">
					<view class="class-box">
						<view class="class-item" v-for="(item,index) in list" :key="index">
							<view @tap.stop="productList(item)" class="class-name dis-flex flex-y-center flex-x-between">
								<view class="f-28 col-6">{{ item.name }}<text class="f-26">({{item.total}})</text></view>
								<view class="f-24 col-6">更多<text class="iconfont2 icon-more1 f-24"></text></view>
							</view>
							<view class="g-container">
								<template v-for="(vo, k) in item.data">
									<view class="g-box m-b-30 dis-flex flex-x-between" :key="k" @tap.stop="toDetail(vo)">
										<view class="g-box-pic">
											<image lazy-load mode="aspectFill" :src="vo.goods.goods_image" class="g-image" />
										</view>
										<view class="g-box-info flex-box m-l-20">
											<view class="g-title onelist-hidden f-28 col-3">{{vo.goods.goods_name}}</view>
											<view class="f-24 col-6 m-t-4 m-t-10">销量{{vo.goods.goods_sales||0}}</view>
											<view class="app-red f-24 m-t-4 m-t-10">¥{{vo.goods.goods_sku.goods_price||0}}</view>
											<view class="prolist-add t-c" @tap.stop="openDialog(vo)"><text class="iconfont2 icon-increase"></text></view>
										</view>
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
					<view class="g-container-nodata min_h_100 p-t-30 dis-flex flex-x-center flex-y-center" v-else>
						<!-- 无数据 -->
						<tui-no-data imgUrl="http://pic.kaidanxia.com/2020-06-22/202006221449022b5c05125.png" :imgWidth="264" :imgHeight="264" :fixed="false">
							<view class="col-9">亲, 没有相关内容</view>
						</tui-no-data>
					</view>
				<!--内容部分 end 自定义可删除-->
			</scroll-view>
		</block>
		
		<!-- 确认购买弹窗 -->
		<proSpecs ref="proSpecs"></proSpecs>
		<!-- 自定义tabbar -->
		<foot-tabBar ref="footTabBar" dIndex='1' :homeStyle="homeStyle"></foot-tabBar>
	</view>
</template>

<script>
	const app = getApp().globalData;
	import footTabBar from '@/components/foot-tabBar';
	import proSpecs from '@/components/goods/proSpecs/pro-specs';
	export default {
		components: {
			footTabBar,
			proSpecs,
		},
		data() {
			return {
				tabbar: [],
				height: 0, //scroll-view高度
				top: 0,
				currentTab: 0, //预设当前项的值
				scrollViewId: "id_0",
				list: [],//右边列表
				homeStyle: '',
			};
		},
		onLoad: function(options) {
			let that = this;
			that.homeStyle = app.homeStyle?app.homeStyle:'div';
			// 设置分类列表高度
			that.$nextTick(() => {
				that.setListHeight();
				that.getList()
			});
		},
		onShow() {
		},
		methods: {
			//获取数据
			getList(){
				app._get('category/list',{}, res => {
					this.tabbar = res.data || [];
					this.getGoodsList()
				});
			},
			// 获取列表
			getGoodsList(){
				uni.showLoading({
				  title: '拼命加载中',
					mask: true
				});
				let category_id = this.tabbar[this.currentTab].category_id;
				app._get('category/goodsList',{category_id: category_id}, res => {
					this.list = res.data || [];
				},null, () => {
					uni.hideLoading()
				});
			},
			//立即购买
			openDialog(item) {console.log(item)
				this.$refs.proSpecs._open(item)
			},
			// 设置分类列表高度
			setListHeight() {
				const query = wx.createSelectorQuery();
				query.select('#top').boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(res => {
					let systemInfo = wx.getSystemInfoSync(),
						rpx = systemInfo.windowWidth / 750,
						scrollHeight = systemInfo.windowHeight - res[0].height - 49 - 10; // swiper高度
						// #ifdef MP-WEIXIN
						scrollHeight = systemInfo.windowHeight - res[0].height - 49 - 10; // swiper高度
						// #endif
			
						this.height = scrollHeight;
						this.top = res[0].height + 10
				});
			},
			// 点击标题切换当前页时改变样式
			swichNav(cur) {
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur;
					this.getGoodsList()
					this.checkCor();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor() {
				if (this.currentTab > 6) {
					this.scrollViewId = `id_${this.currentTab - 2}`;
				} else {
					this.scrollViewId = `id_0`;
				}
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/goods/index?goods_id=' + item.wxapp_goods_id
				});
			},
			productList(item) {console.log(item)
				// let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: '/pages/category/extend/list?source=category&category_id='+item.category_id
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import 'index';
</style>
